<template>
	<view class="page">
		<view class="flex benben-position-layout flex flex-wrap align-center courseCatalog_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
			<view class='flex flex-wrap align-center justify-between flex-sub courseCatalog_fd0_0'>
				<view class='flex flex-wrap align-center courseCatalog_fd0_0_c0' @click="isBack">
					<text class='fu-iconfont2  courseCatalog_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
					
				</view>
				<view class='flex flex-wrap align-center justify-end courseCatalog_fd0_0_c0'>
					<image class='courseCatalog_fd0_0_c2_c0' mode="aspectFill" :src='STATIC_URL+"522.png"'></image>
					<image style="margin-left: 24rpx;" class='courseCatalog_fd0_0_c2_c0' mode="aspectFill" :src='STATIC_URL+"518.png"'></image>
				</view>
				
			</view>
		</view>
		<!-- <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view> -->
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#3090FF"></u-loading>
			<view>加载中</view>
		</view>
		
		<template v-else>
			<view class="videoView">
				<!-- <image :src='STATIC_URL+"519.png"' mode="aspectFill"></image> -->
				<video :src="videoUrl.url" id="videoId" object-fit="contain" autoplay @error="videoError" @ended="videoEnd"></video>
			</view>
			<view class="course_name">
				{{videoUrl.name}}
			</view>
		</template>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBarRpx: 0, // 状态栏高度
				id: "",
				videoUrl: {
					id: "",
					url: "",
					is_download: 1,
					name: ""
				},
				isShow: true,
				videoContext: null,
			}
		},
		onLoad() {
			this.videoUrl = uni.getStorageSync('videoUrl');
			// console.log(this.videoUrl);
			this.init();
		},
		onReady() {
			this.videoContext = uni.createVideoContext('videoId', this);
		},
		methods: {
			isBack() {
				uni.navigateBack();
			},
			init() {
				let _this = this;
				uni.getSystemInfo({
					success: function(e) {
						let unitRatio = 750 / uni.getSystemInfoSync().windowWidth
						_this.StatusBarRpx = e.statusBarHeight * unitRatio;
						// console.log(_this.StatusBarRpx);
						_this.isShow = false;
						// _this.videoContext.play();
					},
				})
			},
			// 视频播放失败
			videoError() {
				uni.showToast({
					title: '播放失败，请重试',
					duration: 1000,
					icon: 'none'
				})
			},
			// 视频结束
			videoEnd() {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.course_name {
		font-size: 34rpx;
		font-weight: bold;
		margin: 30rpx 32rpx;
	}
	.videoView {
		width: 750rpx;
		height: 500rpx;
		image {
			width: 100%;
			height: 100%;
		}
		uni-video {
			width: 100%;
			height: 100%;
		}
	}
	.page {
		background: #fff;
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
	}
	
	.courseCatalog_flex_0 {
		background: transparent;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}
	
	.courseCatalog_fd0_0_c2_c0 {
		width: 48rpx;
		height: 48rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	
	.courseCatalog_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 700;
		color: #333333;
		line-height: 50rpx;
	}
	
	.courseCatalog_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #fff;
	}
	
	.courseCatalog_fd0_0_c0 {
		width: 120rpx;
	}
	
	.courseCatalog_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}
</style>